import React, { Component } from 'react';
import { Breadcrumb, Layout, Menu, theme, Select, Input, DatePicker, Space, Button, Image } from 'antd';
import { GithubOutlined } from '@ant-design/icons';
import { Redirect, Route, useHistory, Link } from "react-router-dom";
import 'dayjs/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import service from '../../utils/service';
import { getshenheList, chuliList, yanhengList, wanchengList } from '../../api/danger'




<DatePicker locale={locale} />;
const { Header, Content, Footer } = Layout;
const arr = [
    {
        key: '001',
        label: `全部隐患`,
    }, {
        key: '002',
        label: `待审核`,
    }, {
        key: '003',
        label: `待处理`,
    }, {
        key: '004',
        label: `待验证`,
    }, {
        key: '005',
        label: `已完成`,
    }, {
        key: '006',
        label: `我的`,
    }

]
const { Option } = Select;
const { RangePicker } = DatePicker;


class dangerManagement extends Component<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            shenheList: [],
            chuliList: [],
            yanhengList: [],
            wanchengList: [],
            type: '',
        }
    }
    //删除
    del(id: any) {
        console.log(id);
        service({
            url: `http://localhost:3000/shenheList/${id}`,
            method: 'DELETE'
        }).then(res => {
            alert('修改成功')
            getshenheList().then(res => {
                this.setState(
                    { shenheList: res.data }
                )
            })
        })
    }
    //指派
    point = (id: any) => {
        this.props.history.push({ pathname: `/Main/assign/${id}` })
    }
    //上报结果
    update = (id: any) => {
        this.props.history.push({ pathname: `/Main/result/${id}` })
    }
    //验证
    verification = (id: any) => {
        this.props.history.push({ pathname: `/Main/verification/${id}` })
    }
    //搜索
    search = () => {
        if (this.state.type == '已完成') {
            this.setState({
                shenheList: [],
                chuliList: [],
                yanhengList: [],
            })
        } else if (this.state.type == '待审核') {
            this.setState({
                wanchengList: [],
                chuliList: [],
                yanhengList: [],
            })
        } else if (this.state.type == '待处理') {
            this.setState({
                wanchengList: [],
                shenheList: [],
                yanhengList: [],
            })
        } else if (this.state.type == '待验证') {
            this.setState({
                wanchengList: [],
                shenheList: [],
                chuliList: [],
            })
        }
    }

    componentWillMount(): void {

        getshenheList().then(res => {
            this.setState(
                { shenheList: res.data }
            )
        })

        chuliList().then(res => {
            this.setState(
                { chuliList: res.data }
            )
        })
        yanhengList().then(res => {
            this.setState(
                { yanhengList: res.data }
            )
        })
        wanchengList().then(res => {
            this.setState(
                { wanchengList: res.data }
            )
        })
    }
    //重置
    reset = () => {
        getshenheList().then(res => {
            this.setState(
                { shenheList: res.data }
            )
        })

        chuliList().then(res => {
            this.setState(
                { chuliList: res.data }
            )
        })
        yanhengList().then(res => {
            this.setState(
                { yanhengList: res.data }
            )
        })
        wanchengList().then(res => {
            this.setState(
                { wanchengList: res.data }
            )
        })

    }

    //待审核查看
    look = (id: any) => {
        this.props.history.push({ pathname: `/Main/Report/${id}` })
    }
    //待处理查看
    lookChuli = (id: any) => {
        this.props.history.push({ pathname: `/Main/LookChuli/${id}` })
    }
    //待验证查看
    lookyanZheng = (id: any) => {
        this.props.history.push({ pathname: `/Main/LookYanzheng/${id}` })
    }
    //待完成查看
    lookfinish = (id: any) => {
        this.props.history.push({ pathname: `/Main/LookFinish/${id}` })
    }

    render() {
        return (
            <Layout>
                <Header style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
                    <div />
                    <Menu
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={arr.map((item) => ({
                            key: item.key,
                            label: item.label,
                        }))}
                    />
                </Header>
                <div style={{ display: 'flex', justifyContent: 'space-around', margin: '20px 0px' }}>
                    <Select style={{ width: '150px' }} defaultValue="隐患状态" onSelect={(value) => { this.setState({ type: value }) }}>
                        <Option value="01">全部</Option>
                        <Option value="待审核">待审核</Option>
                        <Option value="待处理">待处理</Option>
                        <Option value="待验证">待验证</Option>
                        <Option value="已完成">已完成</Option>
                    </Select>
                    <Select style={{ width: '150px' }} defaultValue="隐患级别">
                        <Option value="06">隐患级别</Option>
                        <Option value="07">全部</Option>
                        <Option value="08">重大隐患</Option>
                        <Option value="09">一般隐患</Option>
                    </Select>
                    <Select style={{ width: '150px' }} defaultValue="隐患来源">
                        <Option value="10">隐患来源</Option>
                        <Option value="11">全部</Option>
                        <Option value="12">监控上报</Option>
                        <Option value="13">保安巡查上报</Option>
                        <Option value="14">护学护导上报</Option>
                    </Select>
                    <Select style={{ width: '150px' }} defaultValue="隐患类型">
                        <Option value="15">隐患类型</Option>
                        <Option value="16">全部</Option>
                        <Option value="17">校园三级建设</Option>
                        <Option value="18">校园食品卫生</Option>
                        <Option value="19">校园消防安全</Option>
                        <Option value="20">体艺设施设备</Option>
                    </Select>
                    <Input placeholder="隐患上报人" style={{ width: '150px' }} />
                </div>
                <div>
                    <Space direction="vertical" size={12} style={{ margin: '0px 48px' }}>
                        <RangePicker />
                    </Space>
                    <Space direction="vertical" size={12}>
                        <RangePicker />
                    </Space>
                    <Button type="primary" style={{ margin: '0px 20px' }} onClick={this.search} >查询</Button>
                    <Button onClick={this.reset} >重置</Button>
                </div>
                <div style={{ margin: '20px 0px 0px 0px' }}>
                    <Button type="primary" style={{ margin: '0px 48px 0px' }}> <Link to="/Main/reportDangers">上报隐患</Link> </Button>
                    <Button style={{ margin: '0px 10px  0px 0px' }}>设置负责人</Button>
                    <Button>导出</Button>

                </div>
                <div style={{ border: '1px solid #bae7ff', backgroundColor: '#e6f7ff', height: '50px', lineHeight: '50px', borderRadius: '5px', marginTop: '20px', textIndent: '2em' }}>
                    查询结果：共计{'num'}条数据
                </div>

                <Content className="site-layout" style={{ padding: '0 50px', marginTop: '20px' }}>

                    {/* 待审核 */}
                    <div>
                        {
                            this.state.shenheList.map((item: any) => {
                                return (
                                    < div style={{ background: 'white', height: '320px', }}>
                                        <div style={{ border: '1px solid #f2f2f2', height: '90px', }}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />   </p>
                                                <span>{item.name1}</span>
                                                <Button style={{ background: 'orange', marginLeft: '10px' }}>待审核</Button>
                                            </div>
                                            <div style={{ marginLeft: '68px', color: '#aaa' }}>
                                                <span>上报时间：{item.time}</span>
                                                <span>结束时间:</span>
                                            </div>
                                        </div>
                                        <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>隐患类型：{item.type}</p>
                                        <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点：{item.address}</p>
                                        <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述：{item.desc}</p>
                                        <div>
                                            <Image
                                                style={{ marginLeft: '10px' }}
                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image
                                                style={{ margin: '0px 10px ' }}

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                        </div>
                                        <div style={{ display: 'flex', fontSize: '12px', marginTop: '5px' }}>
                                            <p style={{ marginLeft: '10px' }}>隐患级别:{item.level}  </p>
                                            <span style={{ marginLeft: '10px' }}>处理状态：{'待审核'}</span>
                                            <Button type="primary" style={{ marginLeft: '600px' }} onClick={() => { this.point(item.id) }}  >指派</Button>
                                            <Button style={{ marginLeft: '20px' }} onClick={() => { this.look(item.id) }} >查看详情</Button>
                                            <Button style={{ marginLeft: '20px' }} onClick={() => { this.del(item.id) }}>删除</Button>
                                        </div>
                                    </div>)
                            })
                        }
                    </div>
                    {/* 待处理 */}
                    <div>
                        {
                            this.state.chuliList.map((item: any) => {
                                return (
                                    <div style={{ background: 'white', height: '320px' }}>
                                        <div style={{ border: '1px solid #f2f2f2', height: '90px', }}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />   </p>
                                                <span>{item.name2}</span>
                                                <Button style={{ background: '#ff6600', marginLeft: '10px' }}>待处理</Button>
                                            </div>
                                            <div style={{ marginLeft: '68px', color: '#aaa' }}>
                                                <span>上报时间：{item.time}</span>
                                                <span>结束时间:{item.timeover}</span>
                                            </div>
                                        </div>
                                        <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>{item.type}</p>
                                        <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点：{item.address}</p>
                                        <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述：{item.desc}</p>
                                        <div>
                                            <Image
                                                style={{ marginLeft: '10px' }}
                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image
                                                style={{ margin: '0px 10px ' }}

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                        </div>
                                        <div style={{ display: 'flex', fontSize: '12px', marginTop: '5px' }}>
                                            <p style={{ marginLeft: '10px' }}>隐患级别:{item.leave}  </p>
                                            <span style={{ marginLeft: '10px' }}>处理状态：{'待处理'}</span>
                                            <Button type="primary" style={{ marginLeft: '600px' }} onClick={() => this.update(item.id)}  >上报结果</Button>
                                            <Button style={{ marginLeft: '20px' }} onClick={() => { this.lookChuli(item.id) }}   >查看详情</Button>
                                        </div>
                                    </div>)
                            })
                        }
                    </div>
                    {/* 待验证 */}
                    <div>
                        {
                            this.state.yanhengList.map((item: any) => {

                                return (
                                    <div style={{ background: 'white', height: '320px' }}>
                                        <div style={{ border: '1px solid #f2f2f2', height: '90px', }}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />   </p>
                                                <span>{item.name}</span>
                                                <Button style={{ background: '#6699cc', marginLeft: '10px' }}>待验证</Button>
                                            </div>
                                            <div style={{ marginLeft: '68px', color: '#aaa' }}>
                                                <span>上报时间:{item.time}</span>
                                                <span>结束时间:</span>
                                            </div>
                                        </div>
                                        <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>隐患类型：{item.type}</p>
                                        <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点：{item.address}</p>
                                        <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述：{item.desc}</p>
                                        <div>
                                            <Image
                                                style={{ marginLeft: '10px' }}
                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image
                                                style={{ margin: '0px 10px ' }}

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                        </div>
                                        <div style={{ display: 'flex', fontSize: '12px', marginTop: '5px' }}>
                                            <p style={{ marginLeft: '10px' }}>隐患级别:{item.level}  </p>
                                            <span style={{ marginLeft: '10px' }}>处理状态：{'待验证'}</span>
                                            <Button type="primary" style={{ marginLeft: '600px' }} onClick={() => this.verification(item.id)}  >验证</Button>
                                            <Button style={{ marginLeft: '20px' }} onClick={() => { this.lookyanZheng(item.id) }} >查看详情</Button>
                                        </div>
                                    </div>

                                )
                            })
                        }
                    </div>

                    {/* 已完成 */}
                    <div>
                        {
                            this.state.wanchengList.map((item: any) => {
                                return (
                                    <div style={{ background: 'white', height: '320px' }}>
                                        <div style={{ border: '1px solid #f2f2f2', height: '90px', }}>
                                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                                <p> <GithubOutlined style={{ fontSize: '50px', margin: '10px 10px 0px 10px' }} />   </p>
                                                <span>{item.name}</span>
                                                <Button style={{ background: '#33cc66', marginLeft: '10px' }}>已完成</Button>
                                            </div>
                                            <div style={{ marginLeft: '68px', color: '#aaa' }}>
                                                <span>上报时间:{item.time}</span>
                                                <span>结束时间:</span>
                                            </div>
                                        </div>
                                        <p style={{ margin: '5px 0px 0px 15px', color: '#1890ff', fontSize: '17px' }}>隐患类型：{item.type}</p>
                                        <p style={{ margin: '5px 0px 0px 15px', }}>隐患地点:{item.address}</p>
                                        <p style={{ margin: '5px 0px 5px 15px', }}>隐患描述:{item.desc}</p>
                                        <div>
                                            <Image
                                                style={{ marginLeft: '10px' }}
                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image
                                                style={{ margin: '0px 10px ' }}

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                            <Image

                                                width={100}
                                                height={100}
                                                src="error"
                                                fallback=""
                                            />
                                        </div>
                                        <div style={{ display: 'flex', fontSize: '12px', marginTop: '5px' }}>
                                            <p style={{ marginLeft: '10px' }}>隐患级别:{item.level}  </p>
                                            <span style={{ marginLeft: '10px' }}>处理状态：{'已完成'}</span>
                                            <Button style={{ marginLeft: '690px' }} onClick={() => { this.lookfinish(item.id) }}  >查看详情</Button>
                                        </div>
                                    </div>

                                )
                            })
                        }
                    </div>


                </Content>

            </Layout >
        );
    }
}

export default dangerManagement;